<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>心愿墙 - 筛选查询</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #6366f1;
            --primary-light: #a5b4fc;
            --primary-dark: #4338ca;
            --secondary: #ec4899;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --radius: 12px;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 1.15rem;
            font-weight: 600;
            text-align: center;
            flex: 1;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background-color: var(--bg-light);
            color: var(--primary);
        }
        
        /* 搜索框 */
        .search-container {
            padding: 12px 16px;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
        }
        
        .search-box {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 24px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 0.9rem;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
        }
        
        /* 筛选工具栏 */
        .filter-toolbar {
            display: flex;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
            overflow-x: auto;
            scrollbar-width: none;
        }
        
        .filter-toolbar::-webkit-scrollbar {
            display: none;
        }
        
        .filter-tab {
            flex: 0 0 auto;
            padding: 12px 16px;
            font-size: 0.9rem;
            color: var(--text-secondary);
            border-bottom: 2px solid transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .filter-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        /* 筛选面板 */
        .filter-panels {
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
            overflow: hidden;
        }
        
        .filter-panel {
            padding: 16px;
            display: none;
            animation: fadeIn 0.3s ease;
        }
        
        .filter-panel.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .filter-title {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        /* 分类筛选 */
        .category-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .category-item {
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            transition: var(--transition);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .category-item.active {
            background-color: var(--primary);
            color: white;
        }
        
        /* 标签筛选 */
        .tag-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .tag-item {
            padding: 4px 12px;
            background-color: var(--bg-light);
            color: var(--text-primary);
            font-size: 0.85rem;
            border-radius: 16px;
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid var(--border-light);
        }
        
        .tag-item.active {
            background-color: rgba(99, 102, 241, 0.1);
            color: var(--primary);
            border-color: var(--primary-light);
        }
        
        /* 时间筛选 */
        .time-filter {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .time-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 0;
            cursor: pointer;
        }
        
        .time-option input {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
        }
        
        .time-option span {
            font-size: 0.9rem;
        }
        
        /* 高级筛选 */
        .advanced-filter {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .filter-label {
            font-size: 0.9rem;
            color: var(--text-primary);
        }
        
        .filter-select {
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 0.9rem;
        }
        
        /* 筛选按钮组 */
        .filter-actions {
            display: flex;
            gap: 12px;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border-light);
        }
        
        .filter-btn {
            flex: 1;
            padding: 10px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: var(--transition);
            text-align: center;
        }
        
        .reset-btn {
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
        }
        
        .apply-btn {
            background-color: var(--primary);
            color: white;
            border: none;
        }
        
        /* 结果统计 */
        .results-stats {
            padding: 12px 16px;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
            font-size: 0.85rem;
            color: var(--text-secondary);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .sort-options {
            display: flex;
            align-items: center;
            gap: 4px;
            color: var(--primary);
            cursor: pointer;
        }
        
        /* 许愿列表 */
        .wishes-list {
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        /* 许愿项样式 */
        .wish-item {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .wish-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }
        
        /* 许愿内容 */
        .wish-content {
            padding: 16px;
        }
        
        .wish-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        .wish-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .wish-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .user-info {
            flex: 1;
            min-width: 0;
        }
        
        .user-name {
            font-size: 0.95rem;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .wish-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        
        .wish-text {
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 12px;
        }
        
        /* 许愿图片容器 */
        .wish-images {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(32%, 1fr));
            gap: 4px;
            margin-bottom: 12px;
        }
        
        .wish-image {
            aspect-ratio: 1;
            overflow: hidden;
            border-radius: 8px;
        }
        
        .wish-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        /* 许愿标签 */
        .wish-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }
        
        .wish-tag {
            padding: 2px 8px;
            background-color: rgba(99, 102, 241, 0.1);
            color: var(--primary);
            font-size: 0.75rem;
            border-radius: 4px;
        }
        
        /* 操作按钮 */
        .wish-actions {
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            border-top: 1px solid var(--border-light);
        }
        
        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: var(--text-secondary);
            font-size: 0.75rem;
            background: none;
            border: none;
            transition: var(--transition);
            padding: 4px 12px;
        }
        
        .action-btn i {
            font-size: 1rem;
        }
        
        .action-btn:hover {
            color: var(--primary);
        }
        
        /* 底部导航和发布按钮 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .fab-button {
            position: fixed;
            right: 20px;
            bottom: 80px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
            z-index: 999;
            transition: var(--transition);
            border: none;
        }
        
        /* 提示消息 */
        .toast-message {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 0.9rem;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast-message.show {
            opacity: 1;
        }
        
        /* 加载更多 */
        .load-more {
            margin: 16px 0;
            padding: 12px;
            text-align: center;
            color: var(--primary);
            font-size: 0.9rem;
            background-color: var(--bg-white);
            border-radius: var(--radius);
            border: 1px solid var(--border-light);
            transition: var(--transition);
        }
        
        /* 空状态 */
        .empty-state {
            padding: 60px 20px;
            text-align: center;
            color: var(--text-secondary);
        }
        
        .empty-state i {
            font-size: 3rem;
            margin-bottom: 16px;
            color: var(--border-light);
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">心愿墙</div>
        <button class="nav-btn" id="filterBtn">
            <i class="fas fa-sliders"></i>
        </button>
    </div>
    
    <!-- 搜索框 -->
    <div class="search-container">
        <div class="search-box">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索愿望、标签或用户..." id="searchInput">
        </div>
    </div>
    
    <!-- 筛选工具栏 -->
    <div class="filter-toolbar">
        <div class="filter-tab active" data-panel="category">
            <i class="fas fa-th-large"></i>
            <span>分类</span>
        </div>
        <div class="filter-tab" data-panel="tags">
            <i class="fas fa-tags"></i>
            <span>标签</span>
        </div>
        <div class="filter-tab" data-panel="time">
            <i class="fas fa-clock"></i>
            <span>时间</span>
        </div>
        <div class="filter-tab" data-panel="advanced">
            <i class="fas fa-filter"></i>
            <span>高级</span>
        </div>
    </div>
    
    <!-- 筛选面板 -->
    <div class="filter-panels">
        <!-- 分类筛选面板 -->
        <div class="filter-panel active" id="categoryPanel">
            <div class="filter-title">
                <i class="fas fa-th-large"></i>
                <span>按分类筛选</span>
            </div>
            <div class="category-filter">
                <div class="category-item active">
                    <i class="fas fa-th"></i>
                    <span>全部心愿</span>
                </div>
                <div class="category-item">
                    <i class="fas fa-gift"></i>
                    <span>礼物愿望</span>
                </div>
                <div class="category-item">
                    <i class="fas fa-utensils"></i>
                    <span>美食愿望</span>
                </div>
                <div class="category-item">
                    <i class="fas fa-plane"></i>
                    <span>旅行愿望</span>
                </div>
                <div class="category-item">
                    <i class="fas fa-book"></i>
                    <span>学习愿望</span>
                </div>
                <div class="category-item">
                    <i class="fas fa-heart"></i>
                    <span>情感愿望</span>
                </div>
                <div class="category-item">
                    <i class="fas fa-users"></i>
                    <span>社交愿望</span>
                </div>
                <div class="category-item">
                    <i class="fas fa-briefcase"></i>
                    <span>职场愿望</span>
                </div>
            </div>
            
            <div class="filter-actions">
                <div class="filter-btn reset-btn" id="resetCategory">重置</div>
                <div class="filter-btn apply-btn" id="applyCategory">应用</div>
            </div>
        </div>
        
        <!-- 标签筛选面板 -->
        <div class="filter-panel" id="tagsPanel">
            <div class="filter-title">
                <i class="fas fa-tags"></i>
                <span>按标签筛选</span>
            </div>
            <div class="tag-filter">
                <div class="tag-item active">全部标签</div>
                <div class="tag-item">运动</div>
                <div class="tag-item">摄影</div>
                <div class="tag-item">旅行</div>
                <div class="tag-item">美食</div>
                <div class="tag-item">音乐</div>
                <div class="tag-item">学习</div>
                <div class="tag-item">生日</div>
                <div class="tag-item">礼物</div>
                <div class="tag-item">恋爱</div>
                <div class="tag-item">电影</div>
                <div class="tag-item">读书</div>
                <div class="tag-item">健身</div>
                <div class="tag-item">宠物</div>
                <div class="tag-item">游戏</div>
            </div>
            
            <div class="filter-actions">
                <div class="filter-btn reset-btn" id="resetTags">重置</div>
                <div class="filter-btn apply-btn" id="applyTags">应用</div>
            </div>
        </div>
        
        <!-- 时间筛选面板 -->
        <div class="filter-panel" id="timePanel">
            <div class="filter-title">
                <i class="fas fa-clock"></i>
                <span>按发布时间筛选</span>
            </div>
            <div class="time-filter">
                <div class="time-option">
                    <input type="radio" name="timeFilter" id="timeAll" checked>
                    <label for="timeAll">
                        <span>全部时间</span>
                    </label>
                </div>
                <div class="time-option">
                    <input type="radio" name="timeFilter" id="timeToday">
                    <label for="timeToday">
                        <span>今天</span>
                    </label>
                </div>
                <div class="time-option">
                    <input type="radio" name="timeFilter" id="timeWeek">
                    <label for="timeWeek">
                        <span>近一周</span>
                    </label>
                </div>
                <div class="time-option">
                    <input type="radio" name="timeFilter" id="timeMonth">
                    <label for="timeMonth">
                        <span>近一个月</span>
                    </label>
                </div>
                <div class="time-option">
                    <input type="radio" name="timeFilter" id="time3Months">
                    <label for="time3Months">
                        <span>近三个月</span>
                    </label>
                </div>
                <div class="time-option">
                    <input type="radio" name="timeFilter" id="timeCustom">
                    <label for="timeCustom">
                        <span>自定义范围</span>
                    </label>
                </div>
            </div>
            
            <div class="filter-actions">
                <div class="filter-btn reset-btn" id="resetTime">重置</div>
                <div class="filter-btn apply-btn" id="applyTime">应用</div>
            </div>
        </div>
        
        <!-- 高级筛选面板 -->
        <div class="filter-panel" id="advancedPanel">
            <div class="filter-title">
                <i class="fas fa-filter"></i>
                <span>高级筛选</span>
            </div>
            <div class="advanced-filter">
                <div class="filter-group">
                    <label class="filter-label">愿望状态</label>
                    <select class="filter-select" id="statusFilter">
                        <option value="all">全部状态</option>
                        <option value="pending">未完成</option>
                        <option value="inProgress">进行中</option>
                        <option value="completed">已完成</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label class="filter-label">互动热度</label>
                    <select class="filter-select" id="popularityFilter">
                        <option value="all">全部热度</option>
                        <option value="high">高互动</option>
                        <option value="medium">中等互动</option>
                        <option value="low">低互动</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label class="filter-label">是否有图片</label>
                    <select class="filter-select" id="imageFilter">
                        <option value="all">全部</option>
                        <option value="with">有图片</option>
                        <option value="without">无图片</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label class="filter-label">距离范围</label>
                    <select class="filter-select" id="distanceFilter">
                        <option value="all">不限</option>
                        <option value="1">1公里内</option>
                        <option value="5">5公里内</option>
                        <option value="10">10公里内</option>
                        <option value="50">50公里内</option>
                    </select>
                </div>
            </div>
            
            <div class="filter-actions">
                <div class="filter-btn reset-btn" id="resetAdvanced">重置</div>
                <div class="filter-btn apply-btn" id="applyAdvanced">应用</div>
            </div>
        </div>
    </div>
    
    <!-- 结果统计 -->
    <div class="results-stats">
        <div class="results-count">找到 <span id="resultsNumber">24</span> 个愿望</div>
        <div class="sort-options" id="sortOptions">
            <span>排序</span>
            <i class="fas fa-chevron-down"></i>
        </div>
    </div>
    
    <!-- 许愿列表 -->
    <div class="wishes-list" id="wishesList">
        <!-- 无图许愿 -->
        <div class="wish-item">
            <div class="wish-content">
                <div class="wish-header">
                    <div class="wish-avatar">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像">
                    </div>
                    <div class="user-info">
                        <div class="user-name">星辰大海</div>
                        <div class="wish-time">今天 08:45</div>
                    </div>
                </div>
                
                <div class="wish-text">
                    下个月想参加城市马拉松比赛，希望能坚持训练，顺利完成全程！现在每天只能跑5公里，目标是能轻松跑完20公里。有没有一起训练的跑友呀？
                </div>
                
                <div class="wish-tags">
                    <span class="wish-tag">运动</span>
                    <span class="wish-tag">马拉松</span>
                    <span class="wish-tag">目标</span>
                </div>
            </div>
            
            <div class="wish-actions">
                <button class="action-btn comment-btn" data-id="1">
                    <i class="far fa-comment"></i>
                    <span>24</span>
                </button>
                <button class="action-btn support-btn" data-id="1">
                    <i class="far fa-hand-holding-heart"></i>
                    <span>42</span>
                </button>
                <button class="action-btn like-btn" data-id="1">
                    <i class="far fa-heart"></i>
                    <span>89</span>
                </button>
                <button class="action-btn share-btn" data-id="1">
                    <i class="far fa-share-alt"></i>
                    <span>分享</span>
                </button>
            </div>
        </div>
        
        <!-- 单图许愿 -->
        <div class="wish-item">
            <div class="wish-content">
                <div class="wish-header">
                    <div class="wish-avatar">
                        <img src="https://picsum.photos/id/65/100/100" alt="用户头像">
                    </div>
                    <div class="user-info">
                        <div class="user-name">夏日清风</div>
                        <div class="wish-time">昨天 15:30</div>
                    </div>
                </div>
                
                <div class="wish-text">
                    看中了这款相机很久了，希望下个月生日能收到！最近一直在学习摄影，想记录下生活中的美好瞬间。有没有摄影爱好者可以交流一下呀？
                </div>
                
                <div class="wish-images">
                    <div class="wish-image">
                        <img src="https://picsum.photos/id/119/300/300" alt="相机图片">
                    </div>
                </div>
                
                <div class="wish-tags">
                    <span class="wish-tag">礼物</span>
                    <span class="wish-tag">摄影</span>
                    <span class="wish-tag">生日</span>
                </div>
            </div>
            
            <div class="wish-actions">
                <button class="action-btn comment-btn" data-id="2">
                    <i class="far fa-comment"></i>
                    <span>56</span>
                </button>
                <button class="action-btn support-btn" data-id="2">
                    <i class="far fa-hand-holding-heart"></i>
                    <span>128</span>
                </button>
                <button class="action-btn like-btn" data-id="2">
                    <i class="far fa-heart"></i>
                    <span>215</span>
                </button>
                <button class="action-btn share-btn" data-id="2">
                    <i class="far fa-share-alt"></i>
                    <span>分享</span>
                </button>
            </div>
        </div>
        
        <!-- 三图许愿 -->
        <div class="wish-item">
            <div class="wish-content">
                <div class="wish-header">
                    <div class="wish-avatar">
                        <img src="https://picsum.photos/id/91/100/100" alt="用户头像">
                    </div>
                    <div class="user-info">
                        <div class="user-name">咖啡不加糖</div>
                        <div class="wish-time">3天前</div>
                    </div>
                </div>
                
                <div class="wish-text">
                    计划今年夏天去日本京都旅行，希望能看到美丽的樱花，品尝正宗的日式咖啡和甜点。有没有去过的朋友可以推荐一些小众景点和咖啡馆呀？
                </div>
                
                <div class="wish-images">
                    <div class="wish-image">
                        <img src="https://picsum.photos/id/240/300/300" alt="京都风景">
                    </div>
                    <div class="wish-image">
                        <img src="https://picsum.photos/id/431/300/300" alt="日式咖啡">
                    </div>
                    <div class="wish-image">
                        <img src="https://picsum.photos/id/292/300/300" alt="日式甜点">
                    </div>
                </div>
                
                <div class="wish-tags">
                    <span class="wish-tag">旅行</span>
                    <span class="wish-tag">日本</span>
                    <span class="wish-tag">美食</span>
                </div>
            </div>
            
            <div class="wish-actions">
                <button class="action-btn comment-btn" data-id="3">
                    <i class="far fa-comment"></i>
                    <span>89</span>
                </button>
                <button class="action-btn support-btn" data-id="3">
                    <i class="far fa-hand-holding-heart"></i>
                    <span>76</span>
                </button>
                <button class="action-btn like-btn" data-id="3">
                    <i class="far fa-heart"></i>
                    <span>342</span>
                </button>
                <button class="action-btn share-btn" data-id="3">
                    <i class="far fa-share-alt"></i>
                    <span>分享</span>
                </button>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="load-more" id="loadMore">
            加载更多
        </div>
    </div>
    
    <!-- 发布许愿按钮 -->
    <button class="fab-button" id="addWishBtn">
        <i class="fas fa-plus"></i>
    </button>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-star"></i>
            <span>心愿墙</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comment"></i>
            <span>消息</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息元素 -->
    <div class="toast-message" id="toastMessage"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById("backBtn");
        const filterBtn = document.getElementById("filterBtn");
        const searchInput = document.getElementById("searchInput");
        const addWishBtn = document.getElementById("addWishBtn");
        const loadMoreBtn = document.getElementById("loadMore");
        const wishesList = document.getElementById("wishesList");
        const toastMessage = document.getElementById("toastMessage");
        const resultsNumber = document.getElementById("resultsNumber");
        const sortOptions = document.getElementById("sortOptions");
        const filterTabs = document.querySelectorAll(".filter-tab");
        const filterPanels = document.querySelectorAll(".filter-panel");
        
        // 当前筛选条件
        const currentFilters = {
            category: "all",
            tags: ["all"],
            time: "all",
            status: "all",
            popularity: "all",
            image: "all",
            distance: "all",
            search: ""
        };
        
        // 许愿数据
        const allWishes = [
            {
                id: 1,
                user: { name: "星辰大海", avatar: "https://picsum.photos/id/64/100/100" },
                time: "今天 08:45",
                text: "下个月想参加城市马拉松比赛...",
                images: [],
                tags: ["运动", "马拉松", "目标"],
                category: "运动愿望",
                status: "inProgress",
                popularity: "medium",
                distance: 3
            },
            {
                id: 2,
                user: { name: "夏日清风", avatar: "https://picsum.photos/id/65/100/100" },
                time: "昨天 15:30",
                text: "看中了这款相机很久了...",
                images: ["https://picsum.photos/id/119/300/300"],
                tags: ["礼物", "摄影", "生日"],
                category: "礼物愿望",
                status: "pending",
                popularity: "high",
                distance: 5
            },
            {
                id: 3,
                user: { name: "咖啡不加糖", avatar: "https://picsum.photos/id/91/100/100" },
                time: "3天前",
                text: "计划今年夏天去日本京都旅行...",
                images: [
                    "https://picsum.photos/id/240/300/300",
                    "https://picsum.photos/id/431/300/300",
                    "https://picsum.photos/id/292/300/300"
                ],
                tags: ["旅行", "日本", "美食"],
                category: "旅行愿望",
                status: "pending",
                popularity: "high",
                distance: 8
            },
            {
                id: 4,
                user: { name: "音乐漫游者", avatar: "https://picsum.photos/id/237/100/100" },
                time: "1周前",
                text: "想组建一个小型乐队...",
                images: [
                    "https://picsum.photos/id/1074/300/300",
                    "https://picsum.photos/id/1082/300/300"
                ],
                tags: ["音乐", "乐队", "合作"],
                category: "社交愿望",
                status: "inProgress",
                popularity: "medium",
                distance: 12
            },
            {
                id: 5,
                user: { name: "书香门第", avatar: "https://picsum.photos/id/177/100/100" },
                time: "2周前",
                text: "希望今年能读完50本书...",
                images: [],
                tags: ["阅读", "目标", "文学"],
                category: "学习愿望",
                status: "inProgress",
                popularity: "low",
                distance: 4
            }
        ];
        
        // 初始化
        function init() {
            setupEventListeners();
            renderWishes(allWishes);
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 返回按钮
            backBtn.addEventListener("click", () => {
                history.back();
            });
            
            // 搜索功能
            searchInput.addEventListener("input", debounce(function() {
                currentFilters.search = this.value.trim().toLowerCase();
                applyFilters();
            }, 300));
            
            // 筛选标签切换
            filterTabs.forEach(tab => {
                tab.addEventListener("click", function() {
                    const panelId = this.getAttribute("data-panel") + "Panel";
                    
                    // 更新标签状态
                    filterTabs.forEach(t => t.classList.remove("active"));
                    this.classList.add("active");
                    
                    // 更新面板显示
                    filterPanels.forEach(panel => panel.classList.remove("active"));
                    document.getElementById(panelId).classList.add("active");
                });
            });
            
            // 分类筛选
            document.querySelectorAll(".category-item").forEach(item => {
                item.addEventListener("click", function() {
                    document.querySelectorAll(".category-item").forEach(i => i.classList.remove("active"));
                    this.classList.add("active");
                    currentFilters.category = this.querySelector("span").textContent === "全部心愿" ? "all" : this.querySelector("span").textContent;
                });
            });
            
            // 标签筛选
            document.querySelectorAll(".tag-item").forEach(item => {
                item.addEventListener("click", function() {
                    // 如果点击"全部标签"，取消其他选中状态
                    if (this.textContent === "全部标签") {
                        document.querySelectorAll(".tag-item").forEach(i => i.classList.remove("active"));
                        this.classList.add("active");
                        currentFilters.tags = ["all"];
                    } else {
                        // 取消"全部标签"选中状态
                        document.querySelector(".tag-item.active").classList.remove("active");
                        this.classList.toggle("active");
                        
                        // 收集所有选中的标签
                        currentFilters.tags = Array.from(document.querySelectorAll(".tag-item.active"))
                            .map(tag => tag.textContent);
                    }
                });
            });
            
            // 应用筛选按钮
            document.getElementById("applyCategory").addEventListener("click", () => {
                applyFilters();
                showToast(`已筛选: ${currentFilters.category === "all" ? "全部分类" : currentFilters.category}`);
            });
            
            document.getElementById("applyTags").addEventListener("click", () => {
                applyFilters();
                showToast(`已筛选标签: ${currentFilters.tags.join(", ")}`);
            });
            
            document.getElementById("applyTime").addEventListener("click", () => {
                const selectedTime = document.querySelector('input[name="timeFilter"]:checked').id;
                currentFilters.time = selectedTime.replace("time", "").toLowerCase();
                applyFilters();
                showToast(`已筛选时间: ${getReadableTimeFilter(currentFilters.time)}`);
            });
            
            document.getElementById("applyAdvanced").addEventListener("click", () => {
                currentFilters.status = document.getElementById("statusFilter").value;
                currentFilters.popularity = document.getElementById("popularityFilter").value;
                currentFilters.image = document.getElementById("imageFilter").value;
                currentFilters.distance = document.getElementById("distanceFilter").value;
                applyFilters();
                showToast("已应用高级筛选");
            });
            
            // 重置筛选按钮
            document.getElementById("resetCategory").addEventListener("click", () => {
                document.querySelectorAll(".category-item").forEach(i => i.classList.remove("active"));
                document.querySelector(".category-item:first-child").classList.add("active");
                currentFilters.category = "all";
            });
            
            document.getElementById("resetTags").addEventListener("click", () => {
                document.querySelectorAll(".tag-item").forEach(i => i.classList.remove("active"));
                document.querySelector(".tag-item:first-child").classList.add("active");
                currentFilters.tags = ["all"];
            });
            
            document.getElementById("resetTime").addEventListener("click", () => {
                document.getElementById("timeAll").checked = true;
                currentFilters.time = "all";
            });
            
            document.getElementById("resetAdvanced").addEventListener("click", () => {
                document.getElementById("statusFilter").value = "all";
                document.getElementById("popularityFilter").value = "all";
                document.getElementById("imageFilter").value = "all";
                document.getElementById("distanceFilter").value = "all";
                currentFilters.status = "all";
                currentFilters.popularity = "all";
                currentFilters.image = "all";
                currentFilters.distance = "all";
            });
            
            // 排序功能
            sortOptions.addEventListener("click", () => {
                // 这里可以实现排序下拉菜单
                showToast("排序功能：最新发布、最多点赞、最多评论");
            });
            
            // 加载更多
            loadMoreBtn.addEventListener("click", () => {
                loadMoreBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
                setTimeout(() => {
                    loadMoreBtn.innerHTML = "加载更多";
                    showToast("已加载全部内容");
                }, 1000);
            });
            
            // 发布许愿
            addWishBtn.addEventListener("click", () => {
                showToast("打开发布愿望页面");
            });
        }
        
        // 应用所有筛选条件
        function applyFilters() {
            let filteredWishes = [...allWishes];
            
            // 分类筛选
            if (currentFilters.category !== "all") {
                filteredWishes = filteredWishes.filter(wish => wish.category === currentFilters.category);
            }
            
            // 标签筛选
            if (currentFilters.tags.length > 0 && !currentFilters.tags.includes("all")) {
                filteredWishes = filteredWishes.filter(wish => 
                    wish.tags.some(tag => currentFilters.tags.includes(tag))
                );
            }
            
            // 搜索筛选
            if (currentFilters.search) {
                const searchTerm = currentFilters.search;
                filteredWishes = filteredWishes.filter(wish => 
                    wish.text.toLowerCase().includes(searchTerm) ||
                    wish.user.name.toLowerCase().includes(searchTerm) ||
                    wish.tags.some(tag => tag.toLowerCase().includes(searchTerm))
                );
            }
            
            // 状态筛选
            if (currentFilters.status !== "all") {
                filteredWishes = filteredWishes.filter(wish => wish.status === currentFilters.status);
            }
            
            // 热度筛选
            if (currentFilters.popularity !== "all") {
                filteredWishes = filteredWishes.filter(wish => wish.popularity === currentFilters.popularity);
            }
            
            // 图片筛选
            if (currentFilters.image === "with") {
                filteredWishes = filteredWishes.filter(wish => wish.images && wish.images.length > 0);
            } else if (currentFilters.image === "without") {
                filteredWishes = filteredWishes.filter(wish => !wish.images || wish.images.length === 0);
            }
            
            // 距离筛选
            if (currentFilters.distance !== "all") {
                const maxDistance = parseInt(currentFilters.distance);
                filteredWishes = filteredWishes.filter(wish => wish.distance <= maxDistance);
            }
            
            // 更新结果数量
            resultsNumber.textContent = filteredWishes.length;
            
            // 渲染筛选结果
            renderWishes(filteredWishes);
        }
        
        // 渲染许愿列表
        function renderWishes(wishes) {
            // 清空列表（保留加载更多按钮）
            while (wishesList.children.length > 1) {
                wishesList.removeChild(wishesList.firstChild);
            }
            
            // 如果没有结果，显示空状态
            if (wishes.length === 0) {
                const emptyState = document.createElement("div");
                emptyState.className = "empty-state";
                emptyState.innerHTML = `
                    <i class="fas fa-search"></i>
                    <div>没有找到符合条件的愿望</div>
                    <div style="margin-top: 8px; font-size: 0.85rem;">尝试调整筛选条件</div>
                `;
                wishesList.insertBefore(emptyState, loadMoreBtn);
                return;
            }
            
            // 添加愿望项
            wishes.forEach(wish => {
                const wishElement = createWishElement(wish);
                wishesList.insertBefore(wishElement, loadMoreBtn);
            });
        }
        
        // 创建许愿元素
        function createWishElement(wish) {
            const wishElement = document.createElement("div");
            wishElement.className = "wish-item";
            
            // 构建图片HTML
            let imagesHtml = "";
            if (wish.images && wish.images.length > 0) {
                imagesHtml = `<div class="wish-images">`;
                wish.images.forEach(img => {
                    imagesHtml += `
                        <div class="wish-image">
                            <img src="${img}" alt="许愿图片">
                        </div>
                    `;
                });
                imagesHtml += `</div>`;
            }
            
            // 构建标签HTML
            let tagsHtml = "";
            wish.tags.forEach(tag => {
                tagsHtml += `<span class="wish-tag">${tag}</span>`;
            });
            
            // 组装许愿项HTML
            wishElement.innerHTML = `
                <div class="wish-content">
                    <div class="wish-header">
                        <div class="wish-avatar">
                            <img src="${wish.user.avatar}" alt="${wish.user.name}的头像">
                        </div>
                        <div class="user-info">
                            <div class="user-name">${wish.user.name}</div>
                            <div class="wish-time">${wish.time}</div>
                        </div>
                    </div>
                    
                    <div class="wish-text">
                        ${wish.text}
                    </div>
                    
                    ${imagesHtml}
                    
                    <div class="wish-tags">
                        ${tagsHtml}
                    </div>
                </div>
                
                <div class="wish-actions">
                    <button class="action-btn comment-btn" data-id="${wish.id}">
                        <i class="far fa-comment"></i>
                        <span>${Math.floor(Math.random() * 100)}</span>
                    </button>
                    <button class="action-btn support-btn" data-id="${wish.id}">
                        <i class="far fa-hand-holding-heart"></i>
                        <span>${Math.floor(Math.random() * 200)}</span>
                    </button>
                    <button class="action-btn like-btn" data-id="${wish.id}">
                        <i class="far fa-heart"></i>
                        <span>${Math.floor(Math.random() * 300)}</span>
                    </button>
                    <button class="action-btn share-btn" data-id="${wish.id}">
                        <i class="far fa-share-alt"></i>
                        <span>分享</span>
                    </button>
                </div>
            `;
            
            return wishElement;
        }
        
        // 显示提示消息
        function showToast(message) {
            toastMessage.textContent = message;
            toastMessage.classList.add("show");
            setTimeout(() => {
                toastMessage.classList.remove("show");
            }, 3000);
        }
        
        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function() {
                const context = this;
                const args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }
        
        // 获取易读的时间筛选文本
        function getReadableTimeFilter(timeFilter) {
            const timeMap = {
                "all": "全部时间",
                "today": "今天",
                "week": "近一周",
                "month": "近一个月",
                "3months": "近三个月",
                "custom": "自定义范围"
            };
            return timeMap[timeFilter] || timeFilter;
        }
        
        // 初始化页面
        document.addEventListener("DOMContentLoaded", init);
    </script>
</body>
</html>
